<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>实时监测</title>

  <link rel="stylesheet" type="text/css" href="easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
  <script src="web/JS/URLRooter.js"></script>
  <script src="web/JS/common.js"></script>
  <script src="real_time_monitor.js"></script>

  <style>
    .el-wrapper::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px;
      /*宽度竖滚动条的尺寸*/
      height: 4px;
      /*高度横滚动条的尺寸*/
    }

    .el-wrapper::-webkit-scrollbar-thumb {
      /*滚动条里面的条*/
      border-radius: 4px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #0DB0EC;
    }

    .el-wrapper::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 4px;
      background: #ffffff;
    }

    .imgbackground {
      position: relative;

    }

    .imgclassgreen {
      width: 10px;
      height: 10px;
      z-index: 100;
      position: absolute;
      background: url(img/circle_green.png);
      background-size: 100%;
    }

    .imgclassyellow {
      width: 10px;
      height: 10px;
      z-index: 100;
      position: absolute;
      background: url(img/circle_yellow.png);
      background-size: 100%;
    }

    .imgclassblue {
      width: 10px;
      height: 10px;
      z-index: 100;
      position: absolute;
      background: url(img/circle_blue.png);
      background-size: 100%;
    }

    .imgclassred {
      width: 10px;
      height: 10px;
      z-index: 100;
      position: absolute;
      background: url(img/circle_red.png);
      background-size: 100%;
    }
  </style>
  <script>
  </script>
</head>

<body class="easyui-layout">
  <div data-options="region:'center',title:''" style="padding:5px;" class="el-wrapper">
    <div style="width:100%;padding: 5px;">
      <img style="width: 16px;height: 16px;margin-left: 50px;" src="img/circle_green.png" />
      <span>液位传感器</span>
      <img style="width: 16px;height: 16px;margin-left: 50px;" src="img/circle_yellow.png" />
      <span>温度传感器</span>
      <img style="width: 16px;height: 16px;margin-left: 50px;" src="img/circle_blue.png" />
      <span>压力传感器</span>
      <img style="width: 16px;height: 16px;margin-left: 50px;" src="img/circle_red.png" />
      <span>报警</span>
    </div>
    <div class="imgbackground" id="div_img">
      <img style="height: 750px;z-index:1;" src="img/real_time.png" />
    </div>
  </div>
  <div data-options="region:'east',iconCls:'',title:'',split:false,collapsible:false" style="width:40%">
    <div style="width: 100%;font-size: 25px;padding: 10px;">
      <span id="sp_Sdate"></span>
    </div>
    <div style="width: 95%;margin-left: 10px;height:720px" class="easyui-layout" data-options="border:false">
      <div data-options="region:'north',title:'一级压缩机组',split:false,collapsible:false" style="height:180px;width: 100%;">
        <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
          <span style="margin-right: 0px;">最大温差</span>
          <span id="sp_cp1_temp" style="margin-left: 20px;"></span>
          <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
          <span id="sp_cp1_tempday" style="margin-left: 20px;"></span> -->
        </div>
        <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
          <span style="margin-right: 0px;">最大压差</span>
          <span id="sp_cp1_p" style="margin-left: 20px;"></span>
          <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
          <span id="sp_cp1_pday" style="margin-left: 20px;"></span> -->
        </div>
      </div>
      <div data-options="region:'center'" style="height: 360px;">
        <div class="easyui-layout" data-options="fit:true,border:false">
          <div data-options="region:'north',title:'二级压缩机组',collapsible:false,split:false" style="height:180px;width: 100%;">
            <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
              <span style="margin-right: 0px;">最大温差</span>
              <span id="sp_cp2_temp" style="margin-left: 20px;"></span>
              <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
              <span id="sp_cp2_tempday" style="margin-left: 20px;"></span> -->
            </div>
            <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
              <span style="margin-right: 0px;">最大压差</span>
              <span id="sp_cp2_p" style="margin-left: 20px;"></span>
              <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
              <span id="sp_cp2_pday" style="margin-left: 20px;"></span> -->
            </div>
          </div>
          <div data-options="region:'south',title:'三级第一压缩机组',split:false,collapsible:false"
            style="height:180px;width: 100%;">
            <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
              <span style="margin-right: 0px;">最大温差</span>
              <span id="sp_cp3_temp" style="margin-left: 20px;"></span>
              <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
              <span id="sp_cp3_tempday" style="margin-left: 20px;"></span> -->
            </div>
            <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
              <span style="margin-right: 0px;">最大压差</span>
              <span id="sp_cp3_p" style="margin-left: 20px;"></span>
              <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
              <span id="sp_cp3_pday" style="margin-left: 20px;"></span> -->
            </div>
          </div>
        </div>
      </div>
      <div data-options="region:'south',title:'三级第二压缩机组',split:false,collapsible:false"
        style="height:180px;width: 100%;">
        <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
          <span style="margin-right: 0px;">最大温差</span>
          <span id="sp_cp4_temp" style="margin-left: 20px;"></span>
          <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
          <span id="sp_cp4_tempday" style="margin-left: 20px;"></span> -->
        </div>
        <div style="width: 100%;font-size: larger;padding-top: 25px;padding-left: 25px;">
          <span style="margin-right: 0px;">最大压差</span>
          <span id="sp_cp4_p" style="margin-left: 20px;"></span>
          <!-- <span style="margin-left: 20px;color: red;">日涨幅</span>
          <span id="sp_cp4_pday" style="margin-left: 20px;"></span> -->
        </div>
      </div>
    </div>
  </div>
  <!-- <div data-options="region:'south',title:'',split:false,collapsible:false"
    style="height:10%;text-align: center;font-size: 25px;padding: 20px;">
    <span id="sp_StartDate" style="margin-right: 20px;"></span>
    <span id="sp_EndDate" style="margin-left: 20px;"> </span>
  </div> -->
</body>

</html>